<template>
  <ContentWrap title="搜索">
    <el-form :inline="true" label-suffix=":">
      <el-form-item label="分类">
        <el-input clearable v-model="SearchDict.wwid" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="getTableData">搜索</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap title="列表" class="space-y-20px">
    <el-row>
      <el-col :span="3">
        <el-upload
          :action="actionUrl"
          :headers="headers"
          :on-success="handleBlockUser"
          accept=".xlsx"
          class="upload-demo"
        >
          <el-button type="primary">上传新增Excel</el-button>
          <template #tip>
            <div class="el-upload__tip"> 仅支持 .xlsx 格式文件</div>
          </template>
        </el-upload>
      </el-col>
      <el-col :span="3">
        <el-upload
          :action="actionBlockUrl"
          :headers="headers"
          :limit="1"
          :on-success="handleBlockUser"
          accept=".xlsx"
          class="upload-demo"
        >
          <el-button type="warning">上传禁用Excel</el-button>
          <template #tip>
            <div class="el-upload__tip"> 仅支持 .xlsx 格式文件</div>
          </template>
        </el-upload>
      </el-col>
      <el-col :span="3">
        <el-button @click="downloadTemplate">下载模板</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="tableLoading" :data="tableData" border class="space-y-20px" stripe>
      <el-table-column label="序号" prop="id" />
      <el-table-column label="工号" prop="wwid" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.state === 1" type="primary">正常</el-tag>
          <el-tag v-else-if="scope.row.state === 2" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上传日期" prop="created_at">
        <template #default="scope">
          {{ formatTs(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div class="action-btns">
            <el-button v-if="scope.row.state === 2" type="success" @click="passWhiteList(scope.row)"
              >通过</el-button
            >
            <el-button v-else type="danger" @click="blockWhiteList(scope.row)">禁用</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="SearchDict.page"
      v-model:page-size="SearchDict.page_size"
      :total="total"
      background
      class="mt-4 flex-center"
      layout="total, prev, pager, next, sizes, jumper"
      small
      @current-change="pageChange"
      @size-change="sizeChange"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import { useUserStoreWithOut } from '@/store/modules/user'
import { ElNotification } from 'element-plus'

const formatTs = (ts) => {
  console.log(ts)
  ts = ts.replace('T', ' ', 1)
  ts = ts.replaceAll('+08:00', '', 1)
  return ts
}

const SearchDict = ref({
  page: 1,
  page_size: 10,
  wwid: ''
})

const tableLoading = ref(false)
const tableData = ref([])
const total = ref(0)

const resetSearch = () => {
  SearchDict.value = {
    page: 1,
    page_size: 10,
    wwid: ''
  }
  getTableData()
}

const pageChange = (page) => {
  SearchDict.value.page = page
  getTableData()
}

const sizeChange = (size) => {
  SearchDict.value.page_size = size
  getTableData()
}

const getTableData = () => {
  tableLoading.value = true
  request({
    url: 'white/list',
    method: 'post',
    data: SearchDict.value
  }).then((res) => {
    tableLoading.value = false
    if (res.code === 200) {
      tableData.value = res.data
      total.value = res.count
    }
  })
}

// 上传excel
const userStore = useUserStoreWithOut()
// 上传
const actionUrl = import.meta.env.VITE_PHOTO_BASE_PATH + 'add/white/list'
const actionBlockUrl = import.meta.env.VITE_PHOTO_BASE_PATH + 'block/white/list'
const headers = ref({
  Authorization: userStore.getToken
})

// 上传禁用用户模板成功
const handleBlockUser = (res) => {
  if (res.code === 200) {
    ElNotification.success('上传成功!')
    getTableData()
  } else {
    ElNotification.error(res.msg)
  }
}

const downloadTemplate = () => {
  request({
    url: 'white/list/template',
    method: 'post',
    responseType: 'blob'
  }).then((res) => {
    console.log(res)
    // const blob = new Blob([res.data])
    // saveAs(blob, '模板.xlsx')
    const url = window.URL.createObjectURL(new Blob([res]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '模板.xlsx')
    document.body.appendChild(link)
    link.click()
  })
}

const passWhiteList = (item) => {
  request({
    url: 'white/update',
    method: 'post',
    data: {
      id: item.id,
      state: 1
    }
  }).then((res) => {
    if (res.code === 200) {
      ElNotification.success('操作成功')
      getTableData()
    }
  })
}

const blockWhiteList = (item) => {
  request({
    url: 'white/update',
    method: 'post',
    data: {
      id: item.id,
      state: 2
    }
  }).then((res) => {
    if (res.code === 200) {
      ElNotification.success('操作成功')
      getTableData()
    }
  })
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="less"></style>
